<template>
  <div class="card detail-card" @click="clickItem(item)" :class="labelMap[item.firstLabelName]">
    <div class="show-part" v-if="item.type !== null">
      <div class="ell errWord" :title="item.errWord">
        <span>{{ item.errWord }}</span>
        <a-icon type="arrow-right" style="color: #959292; margin: 0 8px" />
        <span class="advice-word" :advice="getAdvice">{{ getAdvice }}</span>
      </div>
      <span class="err-rank">{{ item.level === '1' ? '错误' : item.level === '2' ? '疑错' : '严重错误' }}</span>
    </div>
    <div class="hide-part">
      <div class="advice">
        <p class="ad-word" v-if="item.corWord && item.corWord.length > 0 && item.corWord[0][0] != '<' && item.type">建议替换：{{ getAdvice }}</p>
        <p>问题类型：{{ item.violateInfo || item.tag }}</p>
      </div>
      <div class="handle">
        <a-space>
          <a-popover v-if="item.uuid">
            <a-button type="'link'" :style="{ backgroundColor: item.isAuthAssess != 1 ? '#8a8a8a' : '' }">{{ item.result ? '已评价' : '评价' }} </a-button>
            <template slot="content">
              <span
                class="icon-btn"
                @click="selectEvaluate('5')"
                :style="{ borderColor: '#0DBC79', color: active == '5' ? '#fff' : ' #0DBC79', backgroundColor: active == '5' ? '#0DBC79' : ' #fff' }"
              >
                <svg t="1688525815103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="16" height="16">
                  <path
                    d="M512 938.7C276.4 938.7 85.3 747.6 85.3 512S276.4 85.3 512 85.3s426.7 191 426.7 426.7-191 426.7-426.7 426.7z m-213.3-384a213.3 213.3 0 0 0 426.7 0h-85.3a128 128 0 0 1-256 0h-85.4z m42.7-85.3a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m341.3 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z"
                    p-id="8473"
                    :fill="active == '5' ? '#fff' : '#0DBC79'"
                  ></path>
                </svg>
                准确
              </span>
              <span
                class="icon-btn"
                @click="selectEvaluate('3')"
                :style="{ borderColor: '#3167F1', color: active == '3' ? '#fff' : '#3167F1', backgroundColor: active == '3' ? '#3167F1' : ' #fff' }"
              >
                <svg t="1688526001079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9168" width="16" height="16">
                  <path
                    d="M512 938.7C276.4 938.7 85.3 747.6 85.3 512S276.4 85.3 512 85.3s426.7 191 426.7 426.7-191 426.7-426.7 426.7zM341.3 597.4v85.3h341.3v-85.3H341.3z m0-128a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m341.3 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z"
                    p-id="9169"
                    :fill="active == '3' ? '#fff' : '#3167F1'"
                  ></path>
                </svg>
                一般
              </span>
              <span
                class="icon-btn"
                @click="selectEvaluate('1')"
                :style="{ borderColor: '#CA1722', color: active == '1' ? '#fff' : ' #CA1722', backgroundColor: active == '1' ? '#CA1722' : ' #fff' }"
              >
                <svg t="1688526016698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9328" width="16" height="16">
                  <path
                    d="M512 938.7C276.4 938.7 85.3 747.6 85.3 512S276.4 85.3 512 85.3s426.7 191 426.7 426.7-191 426.7-426.7 426.7zM298.7 725.4H384a128 128 0 0 1 256 0h85.3a213.3 213.3 0 0 0-426.7 0z m42.7-256a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m341.3 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z"
                    p-id="9329"
                    :fill="active == '1' ? '#fff' : '#CA1722'"
                  ></path>
                </svg>
                不准确
              </span>
            </template>
          </a-popover>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script>
import { labelMap } from '@/utils/const';
import { assess } from '@/services/verify.js';

export default {
  name: 'OcrCard',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      labelMap,
      active: null
    };
  },
  computed: {
    getAdvice() {
      return this.item.corWord === null ||
        (this.item.corWord && this.item.corWord.length === 0) ||
        (this.item.corWord && this.item.corWord.length > 0 && this.item.corWord[0][0] == '<' && this.item.corWord[0][this.item.corWord[0].length - 1] == '>')
        ? '建议删除'
        : this.item.corWord && this.item.corWord.join(',');
    }
  },
  created() {},
  mounted() {
    this.active = this.item.result;
  },
  methods: {
    clickItem(item) {
      this.$emit('play', item);
    },
    selectEvaluate(type) {
      if (this.item.isAuthAssess != 1) return;
      this.active = type;
      assess({ taskId: this.item.taskId, uuid: this.item.uuid, result: this.active }).then(res => {
        this.$message.success(res.data.data);
        this.$emit('assess', this.item, this.active);
      });
    }
  }
};
</script>

<style scoped lang="less">
.card {
  width: 100%;
  border: 1px solid #e9e9e9 !important;
  border-radius: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  &.cbz {
    border-left: 6px solid #46b1ff !important;
  }
  &.ysxt {
    border-left: 6px solid #e05f5f !important;
  }
  &.mgxx {
    border-left: 6px solid #ebc643 !important;
  }
  &.scsh {
    border-left: 6px solid #17805a !important;
  }
  &.flfg {
    border-left: 6px solid #36cdcd !important;
  }
  &.grxx {
    border-left: 6px solid #fa906c !important;
  }
  &.kjmc {
    border-left: 6px solid #7a53e5 !important;
  }
  &.zdyc {
    border-left: 6px solid #78b45c !important;
  }
  &.qtmgxx {
    border-left: 6px solid #fa8701 !important;
  }
  .show-part {
    // height: 46px;
    width: 100%;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    padding-left: 11px;
    padding-right: 13px;
    .errWord {
      width: 80%;
      color: #000;
      font-size: 13px;
      font-weight: bold;
    }
    .advice-word {
      color: #2b65f4;
      margin-left: 2px;
    }
    // & > div:last-child{
    //   width: 100%;
    // }
    .err-rank {
      border: 1px solid #de6969;
      color: #de6969;
      padding: 1px 18px;
      border-radius: 12px;
      font-size: 13px;
    }
  }
  .hide-part {
    display: none;
    margin-top: 8px;
    padding-left: 11px;
    padding-right: 13px;
    .advice {
      width: 70%;
      font-size: 13px;
      .ad-word {
        color: #d43a3a;
        margin-bottom: 4px;
      }
    }
    .handle {
      width: 30%;
      font-size: 13px;
      position: absolute;
      bottom: 8px;
      right: 13px;
      text-align: right;
      button {
        font-size: 12px;
        background-color: #2b65f4;
        padding: 0 16px;
        height: 24px;
        color: #fff;
      }
    }
  }
  .cbz {
    border: 1px solid #3aa8fe;
    color: #3aa8fe;
    &.active {
      background-color: #3aa8fe;
      color: #fff;
    }
  }
  .ysxt {
    border: 1px solid #d95354;
    color: #d95354;
    &.active {
      background-color: #d95354;
      color: #fff;
    }
  }
  .mgxx {
    border: 1px solid #e5bb37;
    color: #e5bb37;
    &.active {
      background-color: #e5bb37;
      color: #fff;
    }
  }
  .scsh {
    border: 1px solid #f27552;
    color: #f27552;
    &.active {
      background-color: #f27552;
      color: #fff;
    }
  }
  .flfg {
    border: 1px solid #6c4cdd;
    color: #6c4cdd;
    &.active {
      background-color: #6c4cdd;
      color: #fff;
    }
  }
  .grxx {
    border: 1px solid #14744f;
    color: #14744f;
    &.active {
      background-color: #14744f;
      color: #fff;
    }
  }
  .kjmc {
    border: 1px solid #68cacb;
    color: #68cacb;
    &.active {
      background-color: #68cacb;
      color: #fff;
    }
  }
  .zdyc {
    border: 1px solid #86b267;
    color: #86b267;
    margin-right: 0;
    &.active {
      background-color: #86b267;
      color: #fff;
    }
  }
}
.detail-card {
  .errWord {
    & > span:first-child {
      text-decoration-line: line-through;
      text-decoration-color: #ff0000;
      text-decoration-thickness: 3px;
    }
    .advice-word {
      padding: 1px 10px 3px;
      color: #fff;
      background-color: #0f95fd;
      border-radius: 4px;
    }
    .advice-word[advice='建议删除'] {
      background-color: #ffd464;
    }
  }
  .hide-part {
    display: block;
    .handle {
      width: 30%;
      font-size: 13px;
      position: absolute;
      bottom: 8px;
      right: 13px;
      text-align: right;
      button {
        font-size: 12px;
        background-color: #2b65f4;
        padding: 0 16px;
        height: 24px;
        color: #fff;
      }
    }
  }
}
.icon-btn {
  cursor: pointer;
  line-height: 24px;
  display: inline-block;
  border: 1px solid #8a8a8a;
  padding: 0 3px;
  border-radius: 12px;
  margin-right: 5px;
  .icon {
    position: relative;
    top: 3px;
  }
}
</style>
